<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${requestScope.pattern.pname}</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/pattern.css"  type="text/css" />
<link rel="stylesheet" href="css/main.css" media="screen" type="text/css" />
<script src='js/jquery.js'></script>
<script type="text/javascript" src="js/pattern1.js"></script>
</head>
<body>
<%request.setCharacterEncoding("UTF-8"); %>
	<label id="judge" style="display: none;">${requestScope.pattern.pid +1}</label>
	<div>
		<div class="sidebar">
		<h1>
			<i class="fa fa-bars push"></i>Design Pattern
		</h1>
		<ul>
			<!-- c:foreach会将迭代的值存放在request里面,可用el表达式  -->
			 <c:forEach items="${sessionScope.menus }" var="item">
			 	${item.menu }
			 </c:forEach>
		</ul>
		</div>
		<script src="js/index.js"></script> 
		<!-- 头部了开始 -->
		<div>
			<div id="head">
				<label>${requestScope.pattern.pname}</label>
			</div>
		</div>
		<!-- 头部结束 -->
		
		
		<!-- 右半部分（导航 锚点） -->
		<div id="menu">
			<ul>
				<li><a href="#item1" class="current">简介</a>
				<li><a href="#item2">使用场景</a>
				<li><a href="#item3">优缺点</a>
				<li><a href="#item4">应用实例</a>
				<li><a href="#item5">UML图</a>
				<li><a href="#item6">实现</a>
				<li><a href="#item7">其他</a>
			</ul>
		</div>
		<!-- 右半部分（主体） -->
		<div id="content">
			<div id="item1" class="item">
				<h2 class="jj">简介</h2>
				${requestScope.pattern.pintroduce }
			</div>
			<div id="item2" class="item">
				<h2>使用场景</h2>
				 ${requestScope.pattern.pchangjing }
			</div>
			<div id="item3" class="item">
				<h2>优缺点</h2>
				 ${requestScope.pattern.pyouquedian }
			</div>
			<div id="item4" class="item">
				<h2>应用实例</h2>
				 ${requestScope.pattern.pshili }
			</div>
			<div id="item5" class="item">
				<h2>UML图</h2>
				<img alt="该模式UML图" src="${requestScope.pattern.pimg}" width="820" height="640">
			</div>
			<div id="item6" class="item">
				 ${requestScope.pattern.pdaima }
			</div>
			<div id="item7" class="item" style="height: 600px">
				<h2>其他</h2>
				 ${requestScope.pattern.pqita }
			</div>
		</div>
		<div class="down">
		<label>技术支持:李洋洋</label>
		<label><a href="suggest">提出建议</a></label>
		<label><a href="contact">联系我们</a></label>
		</div>
	</div>

  	 

</body>
</html>